><

About font sizes across platforms



Adobe GoLive lets you apply a relative font size to text on your Web page. Text formatted with a relative font size appears at a size related to the size set in the Web browser's preferences. Most viewers have their browsers configured to display text at 12 points. By applying a relative font size to text, you can have the text appear at the same size as the size set in the browser's preferences, or a smaller or larger size. For information on applying relative font sizes, see Applying relative font sizes.

In addition to the font size being relative to the browser's preferences, fonts in Windows are about one step larger than in Mac OS because of a difference in pixel resolution between platforms. Before publishing your page on the Web, you should view your page at a variety of font sizes. Most browsers make it easy for you to change font sizes when viewing your page. To make sure that your page can handle a range of font sizes, you should follow these guidelines when designing your page:

  • Set the default font size for displaying text in Adobe GoLive to 10 points. This reduces the chance of your page being viewed using a smaller font size than what you used for the page layout. To set the default font size in Adobe GoLive, choose Edit > Preferences, click the Encodings icon in the left pane of the Preferences dialog box, click to select the default encoding, and click OK. Then choose Edit > Preferences, click the Fonts icon in the left pane of the Preferences dialog box, click the symbol to the left of Western to expand the list, select Proportional Font under Western, choose a size from the Size pop-up menu, and click OK.
  • Don't create a heading by formatting text using a paragraph style (such as Header 1 or Header 2) and a relative font size. The relative font size can cause the heading to wrap and adversely affect your page layout.
  • Keep in mind that a layout text box doesn't decrease in size when the text appears at a smaller font size than what you used for the page layout. As a result, extra space can appear between the text in the box and objects below the box.
  • Keep in mind that a layout text box increases in size to accommodate the text when the text appears at a larger font size than what you used for the page layout. When the box increases in size, objects below the box are moved downwards on the page.
  • To control the amount of space that appears between text and an image, place the text and image inside a layout text box. (To have more control over the placement of the image, you can add a layout grid to the box and then add the image to the grid.) When text appears at a smaller or larger font size than what you used for the page layout, the image moves up and down as the text resizes.
  • To control how text and an image are aligned on the page at any displayed font size, you can use a table. Put the text in one table cell and the image in another cell. You can use a table by itself or on a layout grid.
  • When specifying the font size for a style in a cascading style sheet, use pixels to have browsers for Windows and Mac OS display the font size more consistently. If you are using the Fonts tab of the CSS Selector Inspector to specify a font size for a style, choose Pixel in the Size pop-up menu.


  • Page Layout Basics > About font sizes across platforms